<template>
  <div class="dashboard-container">
    <div class="setContent">
      <div class="title">更换主管理员</div>
      <div class="cont">
        <div class="" v-if="step === 1">
          <div class="item">
            <div>当前管理员：</div>
            <div class="nameInfo"><span class="name">{{userdata.userName}}</span> <span class="icon">&#xe640;</span> 换绑主管理账号，需要验证当前主管理账号的身份</div>
          </div>
          <div class="item">
            <div>手机号：</div>
            <div><input type="text" :value="this.userdata.mobile | phoneFormat" class="phoneInput" disabled=""> <span class="getCode" @click="getCode(userdata.mobile)">{{codeTime}}</span></div>
        </div>
        <div class="item">
          <div>验证码：</div>
            <div><input type="text" v-model="code" class="codeInput" placeholder="请输入"></div>
          </div>
          <div class="item">
            <div class="subItem"><span @click="nextStep">下一步</span></div>
          </div>
        </div>
        <div v-if="step === 2">
          <div class="item">
            <div>当前管理员：</div>
            <div class="nameInfo">
              <el-select :value="value" filterable size="mini" width="255" @change="changeMember" placeholder="请选择管理员">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.username"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item">
            <div>手机号：</div>
            <div><input type="text" :value="phone | phoneFormat" class="phoneInput" placeholder="请先选择管理员" disabled=""> <span class="getCode" @click="getCode(phone, 're')">{{reCodeTime}}</span></div>
          </div>
          <div class="item">
            <div>验证码：</div>
            <div><input type="text" v-model="reCode" class="codeInput" placeholder="请输入"></div>
          </div>
          <div class="item">
            <div class="subItem"><span @click="changeAdmin">确定</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    // import {mapGetters} from 'vuex'

    export default {
        name: 'Dashboard',
        data() {
            return {
                code: '',
                codeTime: '获取验证码',
                reCode: '',
                reCodeTime: '获取验证码',
                step: 1,
                loading: false,
                options: [],
                value: '',
                interValTime: '',
                codeData: '',
                phone:'',
                userdata:{}
            }
        },
        computed: {
            // ...mapGetters([
            //     'name',
            //     'userdata'
            // ]),
        },
        filters:{
            phoneFormat(val){
                if (val){
                    return val.substr(0, 3) + '****' + val.substr(7)
                } else {
                    return ''
                }
            }
        },
        created(){
          this.getCurrentAdmin();
        },
        methods: {
          getCurrentAdmin(){
            this.$store.dispatch('company/getCurrentAdmin').then((res) => {
              this.userdata = res;
              this.loading = false
            }).catch(() => {
              this.$message.error('管理员信息获取失败！')
              this.loading = false
            })
          },
            // 获取验证码
            getCode(mobile, st) {
               const _this = this
               if(st != "re"){
                   if (mobile && this.codeTime == '获取验证码') {
                       this.$store.dispatch('user/getCodeAct', {channel: 2, mobile: mobile, type: 3}).then((res) => {
                           if (res.success){
                               this.codeTime = '60 s'
                               this.interValTime = setInterval(function () {
                                   const num = parseInt(_this.codeTime)
                                   if (num == 1){
                                       _this.codeTime = '获取验证码'
                                       clearInterval(_this.interValTime)
                                   }else{
                                       _this.codeTime = num - 1 + ' s'
                                   }
                               }, 1000)
                           }else{
                               this.$message.error('验证码获取失败！')
                           }
                           this.loading = false
                       }).catch(() => {
                           this.loading = false
                       })
                   } else {
                       this.$message.error('请检查手机号！')
                       return false
                   }
               } else {
                   if (mobile && this.reCodeTime == '获取验证码') {
                       this.$store.dispatch('user/getCodeAct', {channel: 2, mobile: mobile, type: 4}).then((res) => {
                           if (res.success){
                               this.reCodeTime = '60 s'
                               this.interValTime = setInterval(function () {
                                   const num = parseInt(_this.reCodeTime)
                                   if (num == 1){
                                       _this.reCodeTime = '获取验证码'
                                       clearInterval(_this.interValTime)
                                   }else{
                                       _this.reCodeTime = num - 1 + ' s'
                                   }
                               }, 1000)
                           }else{
                               this.$message.error('验证码获取失败！')
                           }
                           this.loading = false
                       }).catch(() => {
                           this.loading = false
                       })
                   } else {
                       this.$message.error('请检查手机号！')
                       return false
                   }
               }
            },
            nextStep() {
                if(this.code.length === 4){
                    this.step = 2
                    //验证码校验
                    this.getMemberList()
                } else if (this.code.trim() == '') {
                   this.$message.error('请输入验证码')
                }else{
                    this.$message.error('验证码错误')
                }
                return
                if (this.code.trim()){
                    this.$store.dispatch('user/getCodeAct', { mobile: this.userdata.mobile, type: 4}).then((res) => {
                        if (res.success){
                            this.step = 2
                        }else{
                            this.$message.error('验证码错误,请重新获取！')
                        }
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                } else {
                    this.$message.error('验证码不能为空')
                }
            },
            changeMember(val){
              console.log(val);
              this.value = val.username
                this.codeData = val
                this.phone = val.mobile
            },
            getMemberList(){
                this.$store.dispatch('organization/checkCode', {mobile:this.userdata.mobile, checkcode:this.code, type:3}).then((res) => {
                  if(res){
                    this.$store.dispatch('organization/getSimMemberAct', {pageSize:1000}).then((res) => {
                        this.options = res.rows
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                        this.$message.error('验证码错误')
                    })
                  }else{
                    this.step = 1
                    this.$message.error('验证码错误')
                  }
                })
            },
            changeAdmin() {
              if (this.code.trim()) {
                    this.$store.dispatch('company/changeCompanyAdminAct', {code:this.reCode,id:this.codeData.id}).then((res) => {
                        if (res.success){
                            this.$message.success('修改成功，请重新登录！')
                            const _this = this
                            setTimeout(function () {
                                _this.$store.dispatch('user/logout')
                                _this.$router.push(`/login`)
                            }, 1000)
                        } else {
                            this.$message.error(res.message)
                        }
                        this.loading = false
                    }).catch(() => {
                        this.$message.error('数据提交失败')
                        this.loading = false
                    })
                } else {
                    this.$message.error('验证码不能为空')
                }
            }
        }
    }
</script>

<style lang="scss">
  .setContent {
    .el-input {
      width: 255px;
      height: 40px;
    }
    .el-input--mini .el-input__inner {
      height: 40px;
      line-height: 40px;
    }

  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .topTit {
        line-height: 50px;
      }

      .setContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }

        .cont {
          padding: 15px;

          .item {
            display: flex;
            line-height: 50px;
            margin: 20px 0;

            div:first-child {
              width: 300px;
              text-align: right;
              color: #666;
            }

            div:last-child {
              flex: 1;
            }

            .nameInfo {
              font-size: 14px;
              color: #9b9b9b;

              .name {
                color: #333;
                font-size: 16px;
                margin-right: 10px;
              }
            }

            .phoneInput {
              width: 255px;
              height: 40px;
              background: #f3f3f3;
              border: solid 1px #ccc;
              padding: 3px 10px;
              border-radius: 3px;
            }

            .codeInput {
              width: 255px;
              height: 40px;
              background: #fff;
              border: solid 1px #ccc;
              padding: 3px 10px;
              border-radius: 3px;
            }

            .getCode {
              color: #3345ff;
              cursor: pointer;
              margin-left: 10px;
            }

            .subItem {
              text-align: left !important;

              span {
                position: relative;
                display: inline-block;
                text-align: center;
                width: 110px;
                height: 40px;
                line-height: 40px;
                left: 350px;
                border-radius: 3px;
                background: #3345ff;
                color: #fff;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
</style>
